<template>
	<div class="home-box" ref="Hone">
		<!-- 顶部导航 -->
		<!-- 测试产品 -->
		<div class="homePage_pc_test-product" @click="goPage('/shop')"></div>
		<div class="header-pc">
			<img src="@/assets/image/logo.png" alt="" class="logo" />
			<div class="header-box">
				<p class="header-box-title">{{ $t("home.Product") }}</p>
				<p class="header-box-title2">
					{{ $t("home.Thousands") }}
				</p>
				<div class="join-now-btn" @click="goPage('/signUp')">{{ $t("home.JOIN") }}</div>
			</div>
		</div>
		<div class="live-data-pc">
			<div class="live-data-title">
				{{ $t("home.Live") }}
				<span class="font-vardana text-price">￥{{Websitedata.participants | Statistic}}</span>
				{{ $t("home.participants") }}
				<span class="font-vardana text-price">￥{{Websitedata.totalProducts | Statistic}}</span>
				{{ $t("home.with") }}
				<span class="font-vardana text-price">￥{{Websitedata.refunds | Statistic}}</span>
				{{ $t("home.refunds") }}
			</div>
			<div class="live-data-tips">
				{{ $t("home.Tips") }}
				<span class="font-vardana text-price">{{Websitedata.todayProducts | Statistic}}</span>
				{{ $t("home.trial") }}
				<span class="font-vardana text-price">{{Websitedata.stocks | Statistic}}</span>
				{{ $t("home.stocks") }}
			</div>
		</div>
		<div class="explain-box">
			<div class="">
				<p class="explain-box-title">{{ $t("home.Mottwebsite") }}</p>
				<p class="explain-box-title-content">
					{{ $t("home.feedback") }}
				</p>
			</div>
			<ul class="content-list">
				<li class="content-item">
					<img src="../../assets/image/home/home_whatIcon1.png" alt="" />
					<div class="content-item-title">{{ $t("home.Rebate") }}</div>
					<div class="content-item-content">
						{{ $t("home.purchased") }}
					</div>
				</li>
				<li class="content-item">
					<img src="../../assets/image/home/home_whatIcon2.png" alt="" />
					<div class="content-item-title">{{ $t("home.Shortest") }}</div>
					<div class="content-item-content">
						{{ $t("home.cashback") }}
					</div>
				</li>
				<li class="content-item">
					<img src="../../assets/image/home/home_whatIcon3.png" alt="" />
					<div class="content-item-title">{{ $t("home.Support") }}</div>
					<div class="content-item-content">
						{{ $t("home.service") }}
					</div>
				</li>
				<li class="content-item">
					<img src="../../assets/image/home/home_whatIcon4.png" alt="" />
					<div class="content-item-title">{{ $t("home.Free") }}</div>
					<div class="content-item-content">
						{{ $t("home.needed") }}
					</div>
				</li>
				<li class="content-item">
					<img src="../../assets/image/home/home_whatIcon5.png" alt="" />
					<div class="content-item-title">{{ $t("home.Inventory") }}</div>
					<div class="content-item-content">
						{{ $t("home.daily") }}
					</div>
				</li>
				<li class="content-item">
					<img src="../../assets/image/home/home_whatIcon6.png" alt="" />
					<div class="content-item-title">{{ $t("home.Transfer") }}</div>
					<div class="content-item-content">
						{{ $t("home.Paypal") }}
					</div>
				</li>
			</ul>
			<div class="howIt-works-box clear">
				<div class="howIt-works-title">{{ $t("home.DOES") }}?</div>
				<div class="howIt-works-process_2FOK clearfix">
					<div class="howIt-works-process_2FOK-left">
						<ul class="process-list">
							<li>1</li>
							<li></li>
							<li>2</li>
							<li></li>
							<li>3</li>
							<li></li>
							<li>4</li>
							<li></li>
							<li>5</li>
						</ul>
						<ul class="process-text-list">
							<li>
								<p class="process-text-title">
									{{ $t("home.home1") }}
								</p>
								<p class="process-text-content">
									{{ $t("home.home2") }}
								</p>
								<img src="../../assets/image/home/step1.png" lt="" />
							</li>
							<li>
								<p class="process-text-title">
									{{ $t("home.home3") }}
								</p>
								<p class="process-text-content">
									{{ $t("home.home4") }}
								</p>
								<img src="../../assets/image/home/step2.png" lt="" />
							</li>
							<li>
								<p class="process-text-title">
									{{ $t("home.home5") }}
								</p>
								<p class="process-text-content">
									{{ $t("home.home6") }}
								</p>
								<img src="../../assets/image/home/step3.png" lt="" />
							</li>
							<li>
								<p class="process-text-title">{{ $t("home.home7") }}</p>
								<p class="process-text-content">
									{{ $t("home.home8") }}
								</p>
								<img src="../../assets/image/home/step4.png" lt="" />
							</li>
							<li>
								<p class="process-text-title">
									{{ $t("home.home9") }}
								</p>
								<p class="process-text-content">
									{{ $t("home.home10") }}
								</p>
								<img src="../../assets/image/home/step5.png" lt="" />
							</li>
						</ul>
					</div>
					<div class="howIt-works-process_2FOK-right">
						<p class="user-guide">{{ $t("home.home11") }}</p>
						<p class="download-text">
							{{ $t("home.home12") }}
						</p>
						<div class="howIt-works-btn">{{ $t("home.home13") }}</div>
					</div>
				</div>
			</div>
			<div class="comment-box">
				<div class="comment-box-title">{{ $t("home.home14") }}</div>
				<div class="comment-box-title-info">
					{{ $t("home.home15") }}
				</div>
				<ul class="comment-box-content">
					<li class="comment-box-user-item" v-for="(commentItem, index) in commentList" :key="index">
						<div class="comment-box-user-img" :style="{ backgroundImage: `url(${commentItem.url})` }"></div>
						<div class="comment-box-user-name">{{ commentItem.name }}</div>
						<div class="triangle"></div>
						<div class="comment-box-user-box">{{ commentItem.content }}</div>
					</li>
				</ul>
			</div>
			<div class="quick-stats-box">
				<div class="quick-stats-title">{{ $t("home.home21") }}</div>
				<div class="quick-stats-info">
					{{ $t("home.home22") }}
				</div>
				<ul class="quick-stats-list">
					<li>
						<img src="@/assets/image/home/home_creditIcon1.png" alt="" />
						<p>{{Websitedata.participants | Statistic}}+</p>
						{{ $t("home.home23") }}
					</li>
					<li>
						<img src="@/assets/image/home/home_creditIcon2.png" alt="" />
						<p>￥{{Websitedata.refunds | Statistic}}</p>
						{{ $t("home.home24") }}
					</li>
					<li>
						<img src="@/assets/image/home/home_creditIcon3.png" alt="" />
						<p>5000+</p>
						{{ $t("home.home25") }}
					</li>
				</ul>
			</div>
			<div class="join-us-box">
				<div class="join-us-box-left">
					<p class="join-us-box-left-title">{{ $t("home.home26") }}</p>
					<p class="join-us-box-left-info">
						{{ $t("home.home27") }}
					</p>
					<div class="join-us-box-left-btn">{{ $t("home.home28") }}</div>
				</div>
				<div class="join-us-box-right">
					<p class="join-us-box-right-title">
						{{ $t("home.home29") }}
					</p>
					<div class="join-us-box-right-btn">{{ $t("home.home30") }}</div>
				</div>
			</div>
		</div>
		<!-- ..............................移动端 .................................-->
		<div class="mb-recommend-box">
			<div class="recommend-box-title">{{ $t("home.home32") }}</div>
			<div class="recommend-box-info">
				{{ $t("home.home33") }}
				<br />
				<span class="activePerson">{{Websitedata.participants | Statistic}}</span>
				{{ $t("home.home34") }}
			</div>
			<div class="recommend-box-btn Facebook"  @click="$tool.openNewPage('https://page.line.me/687bnmmo')">
				<img src="../../assets/image/Line-logo.png" alt="" />
				Line
			</div>
			<div class="recommend-box-btn join-now" @click="gologin()">{{ $t("home.home36") }}</div>
			<div class="homePage_mb_newMembersBox_2x-b-" v-show="show">
				<img src=""
					class="homePage_mb_newMembersBox__img_caLo5" @click="show = false" />
				<p class="homePage_mb_newMembersBox__text_cCqXA">
					{{ $t("home.home37") }}
				</p>
				<span class="homePage_mb_newMembersBox__btn_2OwrL" @click="gologin">{{
          $t("home.home38")
        }}</span>
			</div>
		</div>
		<div class="mb-step-box">
			<div class="mb-step-box-title">{{ $t("home.SimpleProcessBack") }}</div>
			<img v-show="$i18n.locale == 'en-US'" src="../../assets/image/home/step-mb-1.png" alt="" />
			<img v-show="$i18n.locale == 'jp-JP'" src="@/assets/image/Simple_Process.jpg" alt="" />
			<div class="mb-step-box-more">
				{{ $t("home.Anyotherquestions") }}?
				<span class="mb-step-box-more-active" @click="goPage('/help')">{{ $t("home.Learnmore") }}</span>
			</div>
		</div>
		<div class="mb-comment-swiper-box">
			<div class="mb-comment-swiper-box-title">
				{{ $t("home.SeeUsersSaid") }}
			</div>
			<div class="swiper-container">
				<ul class="swiper-wrapper">
					<li v-for="(item, index) in commentList" :key="index" class="swiper-slide" style="width: 170px">
						<div class="userRatingCardPage">
							<div class="userRatingCardPage-head">
								<img :src="item.url" alt="" />
								<span class="userRatingCardPage-head-name">{{
                  item.name
                }}</span>
							</div>
							<div class="userRatingCardPage-content">
								<div class="userRatingCardPage-content-text">
									{{ item.content }}
									<div style="height: 1rem"></div>
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<div class="mb-comment-swiper-box">
			<div class="mb-comment-swiper-box-title">
				{{ $t("home.home39") }}
				<span @click="goPage('/shop')">
					{{ $t("home.home40") }}
					<van-icon name="arrow" />
				</span>
			</div>
			<div class="swiper-container">
				<ul class="swiper-wrapper" style="margin-left: 0.5rem">
					<li v-for="(item, index) in newShopList" :key="index" @click="goShopDetail(item)" class="swiper-slide goods-item">
						<div class="goods-box">
							<img class="goods-img" :src="'https://mottecommerce.com/' + item.image" alt="" />
							<div class="goods-detail">
								<p class="goods-title van-multi-ellipsis--l2">{{item.title}}</p>
								<div class="goods-price">
									<span class="current-prices">￥{{item.newest}}</span>
									<span class="original-price">￥{{item.price}}</span>
								</div>
								<div class="goods-cash-box">
									<div class="goods-cash-box-text">100% Cash Back</div>
									<van-icon name="shopping-cart-o" class="van-icon" />
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<div class="mb-comment-swiper-box">
			<div class="mb-comment-swiper-box-title">
				{{ $t("home.home41") }}
				<span @click="goPage('/shop')">
					{{ $t("home.home40") }}
					<van-icon name="arrow" />
				</span>
			</div>
			<div class="swiper-container">
				<ul class="swiper-wrapper" style="margin-left: 0.5rem">
					<li v-for="(item, index) in hotShopList" :key="index" @click="goShopDetail(item)" class="swiper-slide goods-item">
						<div class="goods-box">
							<img class="goods-img" :src="'https://mottecommerce.com/' + item.image" alt="" />
							<div class="goods-detail">
								<p class="goods-title van-multi-ellipsis--l2">{{item.title}}</p>
								<div class="goods-price">
									<span class="current-prices">￥{{item.newest}}</span>
									<span class="original-price">￥{{item.price}}</span>
								</div>
								<div class="goods-cash-box">
									<div class="goods-cash-box-text">100% Cash Back</div>
									<van-icon name="shopping-cart-o" class="van-icon" />
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<my-footer></my-footer>
	</div>
</template>

<script>
	import $tool from '../../tool/index.js'
	import Swiper from "swiper";
	import myFooter from "../../components/my-footer/my-footer.vue";
	export default {
		data() {
			return {
				ToptipHeight: 0,
				show: true,
				commentList: [{
						name: this.$t("home.home16"),
						content: this.$t("home.home17"),
						url: require("@/assets/image/home/01.png"),
					},
					{
						name: this.$t("home.home18"),
						content: this.$t("home.home31"),
						url: require("@/assets/image/home/02.png"),
					},
					{
						name: this.$t("home.home19"),
						content: this.$t("home.home20"),
						url: require("@/assets/image/home/03.png"),
					},
				],
				quickStatsList: [{
						url: require("@/assets/image/home/home_creditIcon1.png"),
						bottom: this.$t("home.home23"),
						data: "56,842+",
					},
					{
						url: require("@/assets/image/home/home_creditIcon2.png"),
						bottom: this.$t("home.home24"),
						data: "￥1,816,926",
					},
					{
						url: require("@/assets/image/home/home_creditIcon3.png"),
						bottom: this.$t("home.home25"),
						data: "5000+",
					},
				],
				hotShopList: [], // 热门商品
				newShopList: [], // 最新商品
				Websitedata: {
					participants:0,
					totalProducts:0,
					refunds:0,
					todayProducts:0,
					stocks:0,
				}, // 网站数据

			};
		},
		created() {
			let token = window.localStorage.getItem("token");
			if (token == null) {
				this.show = true;
			} else {
				this.show = false;
			}
		},
		mounted() {
			this.getHotShopList()
			this.getNewShopList()
			this.getWebsitedata()
			setTimeout(() => { // 解决 swiper默认显示最后的问题 
				this.initSwiper()
			}, 500)
		},
		methods: {
			getWebsitedata() {
				this.$axios({
					url: 'index/siteUserStat/homeDate?countryCode=US'
				}).then(res => {
					console.log(res)
					this.Websitedata = res.data
				})
			},
			goShopDetail(item){
				this.$router.push({
					path: "shopdetail",
					query: {
						id: item.id
					}
				});
			},
			getHotShopList() {
				this.$axios({
					url: 'index/reviewTask/reviewTasks',
					params: {
						current: 1,
						size: 10,
						descs: 'popular',
						countryCode: 'US',
						supportedChannel: 3,
					}
				}).then(res => {
					this.hotShopList = res.data.records
					console.log(res)
				})
			},
			getNewShopList() {
				this.$axios({
					url: 'index/reviewTask/reviewTasks',
					params: {
						current: 1,
						size: 10,
						descs: 'created_time',
						countryCode: 'US',
						supportedChannel: 3,
					}
				}).then(res => {
					this.newShopList = res.data.records
					console.log(res)
				})
			},
			initSwiper() {
				var mySwiper = new Swiper(".swiper-container", {
					loopAdditionSlides: 10,
					circular: true,
					slidesPerView: "auto",
					autoplay: 2000,
					autoplayDisableOnInteraction: false,
					paginationClickable: true,
					observer: true, //修改swiper自己或子元素时，自动初始化swiper
					observeParents: false, //修改swiper的父元素时，自动初始化swiper
					// slidesPerView: 2, // 一次显示4张图片
					loopedSlides: 4,
				});
			},
			goPage(url) {
				this.$router.push(url);
			},
			gologin() {
				let path = 'login'
				if(this.$store.state.isLogin){
					 path = 'profile'
				}
				this.$router.push({
					path,
					query: {
						type: "1"
					}
				});
			},
		},
		components: {
			myFooter,
		},
		filters: {
			Statistic(num) {
				return $tool.statistic(num - 0)
			}
		}
	};
</script>

<style lang='scss' scoped>
	/* 移动端 */
	.goods-item {
		height: 12.4rem;
		width: 8rem !important;
		border-radius: 0.2rem;
		display: inline-block;
		background: #fff;
		margin-right: 10px;
		text-align: left;

		.goods-cash-box {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.van-icon {
				width: 1.2rem;
				height: 1.2rem;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #f5f5f5;
				border-radius: 50%;
			}

			.goods-cash-box-text {
				height: 0.7rem;
				line-height: 0.7rem;
				text-align: center;
				margin: 0 auto;
				padding: 0.2rem;
				line-height: 0.8rem !important;
				border-radius: 0.1rem;
				color: #ffaf5b;
				background: rgba(255, 175, 91, 0.1);
				border: 1px solid #ffaf5b;
				font-size: 0.4rem;
				margin: 0;
			}
		}

		.goods-title {
			white-space: normal;
			margin-top: 0.2rem;
			color: #444;
			font-size: 0.6rem;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
			word-break: break-word !important;
		}

		.goods-price {
			.current-prices {
				font-size: 1rem;
				color: #ffaf5b;
				margin-top: 0.1rem;
				font-weight: 700;
			}

			.original-price {
				font-weight: 400;
				font-size: 0.45rem;
				color: #999;
				text-decoration: line-through;
				vertical-align: middle;
				margin-left: 0.1rem;
			}
		}

		.goods-detail {
			padding: 0 0.3rem;
		}

		.goods-img {
			width: 8rem;
			height: 8rem;
			border-radius: 0.2rem 0.2rem 0 0;
			object-fit: cover;
		}
	}

	.mb-comment-swiper-box {
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		display: none;
		padding-bottom: 0.5rem;

		@media screen and (max-width: 900px) {
			display: block;
		}

		.mb-comment-swiper-box-title {
			font-size: 0.7rem;
			margin: 0 1.2rem;
			padding: 0.9rem 0 0.6rem;
			/* text-align: left; */
			font-weight: bold;
			display: flex;
			justify-content: space-between;
			align-items: center;

			span {
				font-size: 0.6rem;
				display: flex;
				align-items: center;
			}
		}

		.my-swipe {
			margin-left: 0.5rem;
		}

		.userRatingCardPage {
			width: 8rem;
			height: 11rem;
			font-size: 0;
			padding: 0 0.2rem;
			box-sizing: border-box;

			.userRatingCardPage-head {
				display: flex;
				align-items: center;
				height: 2rem;

				img {
					width: 2rem;
					height: 2rem;
					border-radius: 50%;
				}

				.userRatingCardPage-head-name {
					font-size: 0.7rem;
					color: #444;
					margin-left: 0.5rem;
				}
			}
		}

		.userRatingCardPage-content {
			width: 100%;
			height: 7.9rem;
			background: #fff;
			border-radius: 0.2rem;
			margin-top: 1rem;
			position: relative;
			padding-top: 0.4rem;
			box-sizing: border-box;
			filter: drop-shadow(0 0 0.1rem rgba(0, 0, 0, 0.3));

			.userRatingCardPage-content-text {
				white-space: normal;
				font-size: 0.6rem;
				color: #666;
				overflow-y: scroll;
				padding: 0.4rem;
				padding-top: 0;
				height: 7.5rem;
				box-sizing: border-box;
			}

			&::after {
				width: 1rem;
				height: 1rem;
				background: #fff;
				transform: rotate(45deg);
				z-index: -1;
				position: absolute;
				content: "";
				top: -0.4rem;
				left: 0.5rem;
				border-radius: 0.1rem 0 0 0;
			}
		}
	}

	.mb-step-box {
		background: #fff;
		margin: 0.6rem;
		border-radius: 0.2rem;
		text-align: center;

		display: none;

		@media screen and (max-width: 900px) {
			display: block;
		}

		.mb-step-box-title {
			color: #222;
			font-size: 0.7rem;
			margin: 0 0.6rem;
			padding: 0.6rem 0;
			text-align: left;
		}

		img {
			width: 96%;
			margin: 0.3rem 0 0.8rem 0;
		}

		.mb-step-box-more {
			font-size: 0.5rem;
			text-align: center;
			padding: 0.25rem 0 0.5rem 0;

			.mb-step-box-more-active {
				color: #ff5900;
				text-decoration: underline;
				margin-left: 0.1rem;
			}
		}
	}

	.mb-recommend-box {
		width: 100%;
		height: 9.75rem;
		background: url("https://mottecommerce.com/uploads/staticImg/recommend-box.png");
		background-size: 100% 9.75rem;
		position: relative;
		padding-left: 1rem;
		box-sizing: border-box;
		text-align: left;

		display: none;

		@media screen and (max-width: 900px) {
			display: block;
		}

		.activePerson {
			font-weight: 700;
			color: #ff5900;
		}

		.recommend-box-title {
			font-size: 0.8rem;
			font-weight: bold;
			padding: 1rem 0 0.5rem;
			color: #222;
		}

		.recommend-box-info {
			font-size: 0.6rem;
			line-height: 0.8rem;
			color: #444;
		}

		.recommend-box-btn {
			margin-top: 0.5rem;
			height: 1.5rem;
			line-height: 1.5rem;
			text-align: center;
			width: 8rem;
			border-radius: 0.75rem;
			background: #ff5900;
			color: #fff;
			font-size: 0.6rem;
			font-weight: 700;
		}

		.Facebook {
			margin-top: 1rem;
			background: #00c300;
			display: flex;
			align-items: center;
			justify-content: center;
			img {
				width: 1.2rem;
				height: 1.2rem;
				vertical-align: -0.2rem;
				margin-right: 0.3rem;
			}
		}
	}

	/* pc端 */
	.top-banner {
		height: 0;
		text-align: center;
		background-color: #ffae4b;
		overflow: hidden;

		img {
			height: 100%;
		}

		i {
			position: absolute;
			right: 10px;
			top: 10px;
		}

		@media screen and (max-width: 900px) {
			height: 49px;
		}
	}

	.join-us-box {
		width: 100%;
		height: 287px;
		margin-top: 45px;
		margin-bottom: 45px;
		background: url(../../assets/image/home/HomePage_img_banne_03.png) no-repeat #ff5900;
		background-size: 66% 100%;
		background-position-x: right;
		display: flex;

		.join-us-box-right {
			margin-top: 72px;
			margin-left: 100px;

			.join-us-box-right-title {
				font: 18px RALEWAY-REGULAR;
				color: #fff;
			}

			.join-us-box-right-btn {
				display: block;
				font: 20px RALEWAY-BOLD;
				width: 243px;
				height: 50px;
				line-height: 50px;
				border: 1px solid #000;
				background-color: #fff;
				text-align: center;
				margin: 0 auto;
				margin-top: 35px;
				cursor: pointer;
			}
		}

		.join-us-box-left {
			float: left;
			margin-top: 30px;
			margin-left: 62px;

			.join-us-box-left-title {
				font: 48px RALEWAY-BOLD;
				color: #fff;
			}

			.join-us-box-left-info {
				font: 18px RALEWAY-REGULAR;
			}

			.join-us-box-left-btn {
				display: block;
				font: 20px RALEWAY-BOLD;
				width: 243px;
				height: 50px;
				line-height: 50px;
				border: 1px solid #000;
				background-color: #fff;
				text-align: center;
				margin: 0 auto;
				margin-top: 35px;
				cursor: pointer;
			}
		}
	}

	.quick-stats-box {
		margin-top: 60px;

		.quick-stats-list {
			margin-top: 35px;
			display: flex;
			justify-content: space-between;

			li {
				width: 400px;
				height: 212px;
				background-color: #f5f5f5;
				text-align: center;
				font: 18px RALEWAY-REGULAR;

				img {
					height: 98px;
					margin: 0 auto;
					margin-bottom: 25px;
					margin-top: 20px;
				}

				p {
					font: 24px ROBOTO-MEDIUM;
					font-weight: bold;
				}
			}
		}

		.quick-stats-title {
			font: 26px RALEWAY-BOLD;
			font-weight: bold;
			text-align: center;
		}

		.quick-stats-info {
			font: 18px RALEWAY-REGULAR;
			text-align: center;
			margin-top: 15px;
		}
	}

	.comment-box {
		margin-top: 66px;

		.comment-box-user-item {
			flex: 1;
			position: relative;
			text-align: center;
		}

		.comment-box-content {
			background: #f5f5f5;
			width: 100%;
			height: 550px;
			background-color: #f5f5f5;
			margin-top: 130px;
			display: flex;

			.comment-box-user-img {
				position: relative;
				width: 175px;
				height: 175px;
				top: -80px;
				left: 130px;
				margin-bottom: -20px;
				background: no-repeat;
				background-size: contain;
			}

			.comment-box-user-name {
				font: 20px RALEWAY-REGULAR;
			}

			.triangle {
				margin: 0 auto;
				width: 0;
				border-width: 30px;
				border-style: solid;
				border-color: transparent transparent #ff5900 transparent;
			}

			.comment-box-user-box {
				margin: 0 auto;
				height: 304px;
				width: 416px;
				border: 1px solid #ff5900;
				background: #ff5900;
				color: #fff;
				text-align: center;
				padding: 20px;
				box-sizing: border-box;
				font: 18px RALEWAY-BOLD;
			}
		}

		.comment-box-title {
			font: 24px RALEWAY-BOLD;
			text-align: center;
		}

		.comment-box-title-info {
			font: 20px RALEWAY-REGULAR;
			text-align: center;
			margin-top: 15px;
		}
	}

	.process-text-list {
		width: 850px;
		float: right;
		margin-top: 40px;
		text-align: left;

		li {
			margin-bottom: 32px;

			.process-text-title {
				font: 24px RALEWAY-BOLD;
				font-weight: bold;
			}

			.process-text-content {
				font: 18px RALEWAY-REGULAR;
				width: 830px;
			}

			img {
				height: 160px;
				margin-top: 25px;
			}
		}
	}

	.process-list {
		margin-top: 38px;
		float: left;

		li {
			width: 2px;
			height: 256px;
			background-color: #ff5900;
			margin-left: 24px;

			&:nth-child(odd) {
				font: 26px RALEWAY-BOLD;
				width: 40px;
				height: 40px;
				border-radius: 50%;
				background-color: #ff5900;
				text-align: center;
				line-height: 40px;
				color: #fff;
				margin-left: 6px;
			}
		}
	}

	.howIt-works-process_2FOK-right {
		float: left;
		width: 480px;
		height: 1500px;
		background-size: 480px 1500px;
		background: url(../../assets/image/home/home_img_banner_02.png) no-repeat;

		.user-guide {
			margin: 42px;
			font: 48px RALEWAY-BOLD;
		}

		.download-text {
			margin: 0 35px;
			font: 30px RALEWAY-REGULAR;
		}

		.howIt-works-btn {
			font: 24px RALEWAY-MEDIUM;
			background-color: #ff5900;
			color: #fff;
			line-height: 70px;
			text-align: center;
			margin: 15px auto;
			height: 68px;
			width: 396px;
			border: 1px solid #ff5900;
			cursor: pointer;
		}
	}

	.howIt-works-process_2FOK-left {
		float: left;
		width: 920px;
		height: 1500px;
		background-color: #f5f5f5;
	}

	.howIt-works-box {
		margin-top: 54px;

		.howIt-works-title {
			font: 26px RALEWAY-BOLD;
			text-align: center;
		}

		.howIt-works-process_2FOK {
			margin-top: 30px;
		}
	}

	.content-list {
		margin-top: 44px;
		display: flex;
		flex-wrap: wrap;
		text-align: center;

		li {
			flex: 33.33%;
			margin-bottom: 42px;

			div {
				font: 20px RALEWAY-REGULAR;
			}

			img {
				width: 71px;
				height: 71px;
				margin: 0 auto;
				margin-bottom: 25px;
			}

			.content-item-content {
				font-size: 18px;
			}

			.content-item-title {
				font: 24px RALEWAY-MEDIUM;
				margin-bottom: 16px;
				font-weight: bold;
			}
		}
	}

	.explain-box {
		width: 1400px;
		margin: 0 auto;

		@media screen and (max-width: 900px) {
			display: none;
		}

		.explain-box-title {
			font: 24px RALEWAY-BOLD;
			font-weight: bold;
			text-align: center;
			margin-top: 58px;
		}

		.explain-box-title-content {
			font: 18px RALEWAY-REGULAR;
			text-align: center;
			margin-top: 15px;
		}
	}

	.live-data-pc {
		width: 100%;
		height: 200px;
		background-color: #f5f5f5;
		min-width: 1400px;

		@media screen and (max-width: 900px) {
			display: none;
		}

		.live-data-tips {
			font: 20px RALEWAY-REGULAR;
			line-height: 37px;
			text-align: center;
		}

		.live-data-title {
			padding-top: 52px;
			font: 24px RALEWAY-MEDIUM;
			line-height: 37px;
			text-align: center;
		}

		.text-price {
			color: #ffaf52;
		}

		.font-vardana {
			font-family: verdana;
		}
	}

	.homePage_pc_test-product {
		position: fixed;
		top: 475px;
		right: 20px;
		width: 114px;
		height: 114px;
		background: url(../../assets/image/test_Product.png) no-repeat;
		cursor: pointer;
		border-radius: 50%;
		z-index: 10;

		@media screen and (max-width: 900px) {
			display: none;
		}
	}

	.header-pc {
		width: 100%;
		background: url(../../assets/image/homePage_banner.png) no-repeat;
		cursor: pointer;
		background-size: 100% 100%;
		height: 404px;
		padding-bottom: 35px;
		min-width: 1400px;
		position: relative;

		@media screen and (max-width: 900px) {
			display: none;
		}

		.header-box {
			text-align: center;
			padding-top: 120px;
		}

		.header-box-title {
			font-size: 44px;
			color: #fff;
		}

		.join-now-btn {
			margin: 20px auto;
			background: #fff;
			border-color: #ff5900;
			color: #ff5900;
			font: 20px RALEWAY-BOLD;
			display: block;
			text-align: center;
			width: 204px;
			height: 43px;
			line-height: 43px;
			border: 1px solid #fca52d;
			cursor: pointer;
		}

		.header-box-title2 {
			margin-top: 20px;
			font: 22px RALEWAY-MEDIUM;
			color: #fff;
			line-height: 30px;
		}

		.logo {
			width: 200px;
			position: absolute;
			border: none !important;
			top: 35px;
			left: 20px;
			background-size: 100% 100%;
		}
	}

	.homePage_mb_newMembersBox_2x-b- {
		bottom: 2.5rem;
		position: fixed;
		width: 100%;
		height: 2.1rem;
		left: 0;
		background: #ffaf5b;
		display: flex;
		padding: 0 1.2rem;
		box-sizing: border-box;
		align-items: center;
		z-index: 1111;
	}

	.homePage_mb_newMembersBox__img_caLo5 {
		width: 1rem;
		height: 1rem;
	}

	.homePage_mb_newMembersBox__text_cCqXA {
		flex: 1;
		font-size: 0.7rem;
		font-weight: 700;
		margin-left: 0.3rem;
	}

	.homePage_mb_newMembersBox__btn_2OwrL {
		height: 1.4rem;
		line-height: 1.4rem;
		text-align: center;
		margin: 0 auto;
		width: 4.5rem;
		border-radius: 0.2rem;
		background: #222;
		color: #fff;
		font-size: 0.7rem;
	}

	.home-box { 

		@media screen and (max-width: 900px) { 
		}
	}
</style>
